/**
 * @name AvatarItem
 * @author darcrand
 * @desc
 */

import React, { Component } from 'react'
import './styles.scss'

class AvatarItem extends Component {
    static defaultProps = {
        data: {},
        currAvatar: '',
        handleClick: () => {}
    }

    render() {
        const { data, currAvatar, handleClick } = this.props
        return (
            <div classes="avatar-item" onClick={handleClick}>
                <div classes={data.id === currAvatar ? 'avatar-item-container-active' : 'avatar-item-container'}>
                    <div classes="avatar-preview" style={{ backgroundImage: `url("${data.src}")` }} />
                </div>
            </div>
        )
    }
}

export default AvatarItem
